<template>
  <div class="register">
     <div class="content">
        <h4>新用户注册</h4>
        <p>很高兴您将成为商城的会员（注册只需一步）</p>
        <!-- 手机号码 -->
        <my-input placeholder="手机号码" v-model="form.mobile" @blur="mobileFtn" :class="reMobile==0?'':reMobile==1?'success':'error'">
            <template #rule>
              {{reMobile==2?'必填':''}}
            </template>
            <template #icon>
              <i class="iconfont icon-shouji"></i>
            </template>
        </my-input>
       
       <!-- 密码 -->
        <my-input placeholder="密码" :type="showPwd?'text':'password'" v-model="form.pwd" :class="rePwd==0?'':rePwd==1?'success':'error'" @blur="pwdFtn">
          <template #icon>
              <van-icon :name="showPwd?'eye-o':'closed-eye'" @click="showPwd = !showPwd" />
            </template>
        </my-input>
        <!-- 确认密码 -->
        <my-input placeholder="确认密码" type="password" v-model="pwdAgain" >
          <template #icon>
              <van-icon :name="showPwd?'eye-o':'closed-eye'" @click="showPwd = !showPwd" />
            </template>
        </my-input>
        <!-- 用户名 -->
         <my-input placeholder="用户名" v-model="form.nick">
          <template #icon>
              <van-icon name="user-o" />
            </template>
        </my-input>
        <!-- 图形验证码 -->
        <my-input placeholder="图形验证码" v-model="imgCode">
          <template #icon>
              <img class="imgcode" :src="`https://api.it120.cc/small4/verification/pic/get?key=${key}`" alt="" @click="key=new Date().getTime()">
           </template>
        </my-input>
        <!-- 城市的选择 -->
        <my-input placeholder="城市选择" v-model="cityName" @click="show=true">
        </my-input>
        <!-- 短信验证码 -->
        <my-input placeholder="短信验证码" v-model="form.code">
          <template #rule>
            <button class="code" :disabled="disabled" @click="getCode">{{btnMsg}}</button>
          </template>
        </my-input>
        <button class="footBtn" @click="registerFtn">立即注册</button>
         <router-link custom to="/login" v-slot="{ navigate }">
            <p class="footA" @click="navigate">已有账号？立即登录</p>
         </router-link>
     </div>
     <van-popup v-model:show="show" position="bottom">
       <van-area @cancel="show=false" @confirm="confirm" :area-list="areaList" :columns-num="2" />
     </van-popup>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data';
import { ref, reactive, toRefs } from "vue";
import myInput from '../../components/myInput.vue';
import { getSms,sendRegister } from '../../api/secendPage/index';
import { Notify } from 'vant';
import { useRouter } from 'vue-router';
export default {
  components: { myInput },
  setup() {
    const router = useRouter();
    const data = reactive({
      form:{
        mobile: '',
        pwd: '',
        nick: '',
        code: '',
        province: '', // 省份的code
        city: '', // 城市的code
      },
      reMobile: 0, //手机号的状态码 0 代表没有触摸过，1 代表成功 2 代表失败
      rePwd: 0, //密码的状态码 0 代表没有触摸过，1 代表成功 2 代表失败
      showPwd: false, // 是否显示密码
      pwdAgain: '', // 确认密码
      imgCode: '', // 图形验证码
      key: new Date().getTime(),
      cityName: '', // 城市的名称
      show: false, // 是否显示城市弹窗
      btnMsg: '获取验证码',
      disabled: false
    })

    const mobileFtn = () => { // 手机号验证的函数
      let rule = /^1[3-9][0-9]{9}$/; // 手机号的正则
      // test 检验值是否符合正则的规则
      // console.log(rule.test(data.form.mobile));
      data.reMobile = rule.test(data.form.mobile)?1:2
    }

    const pwdFtn = () => { // 密码的验证函数
       let rule = /^[a-zA-Z0-9_]{6,18}$/; // 密码的正则
       data.rePwd = rule.test(data.form.pwd)?1:2
    }

    const confirm = (val) => { // 城市的选择函数
       data.form.province = val[0].code;
       data.form.city = val[1].code;
       data.cityName = `${val[0].name} ${val[1].name}`;
       data.show = false;
    }

    const getCode = () => { // 获取验证码的函数
       getSms({mobile:data.form.mobile,key:data.key,picCode:data.imgCode}).then(res => {
         console.log(res);
       })
       data.disabled = true;
       let num = 60;
       let time = setInterval(()=>{
         if (num>0){
           num--;
           data.btnMsg = `${num}秒后在试`
         } else {
           clearInterval(time)
           data.btnMsg = `获取验证码`
           data.disabled = false
         }
       },1000)
    }

    const registerFtn = () => { // 注册的函数
      sendRegister(data.form).then(res => {
        if (res.code == 0){
          Notify({ type: 'success', message: '注册成功！' });
          router.push('/login');
        } else {
           Notify(res.msg);
        }
      })
    }
    return{
      ...toRefs(data),
      mobileFtn,
      pwdFtn,
      areaList,
      confirm,
      getCode,
      registerFtn
    }
  },
};
</script>
<style lang="scss" scoped>
.register{
  height: 100%;
  padding: 25px;
  box-sizing: border-box;
  .content{
    border: 1px solid #F5F5F5;
    padding: 10px 30px;
    box-sizing: border-box;
    h4{
        margin-top: 30px;
    }
    p{
        margin: 50px 0 10px;
        font-size: 15px;
        color: #909090;
    }
  }
}
.van-icon{
  font-size: 16px;
}
.imgcode{
  width: 120px;
}
.code{
  border: none;
  color: #000;
}
.footBtn{
  font-size: 16px;
  width: 210px;
  height: 42px;
  border: none;
  background: linear-gradient(90deg, #5ea6f8, #bb87f6);
  border-radius: 5px;
  color: #fff;
  margin: 20px auto;
  display: block;
}
.footA{
  text-align: center;
  color: #549ff9 !important;
  margin-top: 10px !important;
}
</style>